<template>
  <div class="i18n-test">
    <h2>{{ t('common.hello') }}, I18n Test!</h2>
    <p>{{ t('common.welcome') }}</p>
    
    <div class="language-selector">
      <label for="language-select">{{ t('layout.themeSettings') }}:</label>
      <Dropdown
        id="language-select"
        v-model="selectedLanguage"
        :options="languageOptions"
        optionLabel="name"
        optionValue="locale"
        @change="onLanguageChange"
      />
    </div>
    
    <div class="translation-demo">
      <h3>{{ t('common.dashboard') }}</h3>
      <div class="translation-examples">
        <div class="example-item">
          <span class="key">common.loginBtn:</span>
          <span class="value">{{ t('common.loginBtn') }}</span>
        </div>
        <div class="example-item">
          <span class="key">login.username:</span>
          <span class="value">{{ t('login.username') }}</span>
        </div>
        <div class="example-item">
          <span class="key">user.nickname:</span>
          <span class="value">{{ t('user.nickname') }}</span>
        </div>
        <div class="example-item">
          <span class="key">common.success:</span>
          <span class="value">{{ t('common.success') }}</span>
        </div>
        <div class="example-item">
          <span class="key">common.error:</span>
          <span class="value">{{ t('common.error') }}</span>
        </div>
      </div>
    </div>
    
    <div class="instructions">
      <h3>{{ t('common.info') }}:</h3>
      <p>{{ t('common.pleaseSelect') }} a language from the dropdown to change the interface language.</p>
      <p>Current language: <strong>{{ currentLanguageName }}</strong></p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18nStore } from '../store/modules/i18n'
import { t } from '../i18n'
import Dropdown from 'primevue/dropdown'

// 使用国际化store
const i18nStore = useI18nStore()

// 当前选中的语言
const selectedLanguage = computed({
  get: () => i18nStore.currentLocale,
  set: (value) => i18nStore.setLocale(value)
})

// 语言选项
const languageOptions = computed(() => {
  return Object.values(i18nStore.languages)
})

// 当前语言名称
const currentLanguageName = computed(() => i18nStore.getCurrentLanguageName)

// 语言切换处理
const onLanguageChange = (event: any) => {
  i18nStore.setLocale(event.value)
}

// 初始化语言设置
i18nStore.initLocale()
</script>

<style scoped>
.i18n-test {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin: 20px;
}

.language-selector {
  margin: 20px 0;
  padding: 15px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.language-selector label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.translation-demo {
  margin: 20px 0;
}

.translation-examples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  margin-top: 15px;
  padding: 15px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.example-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.example-item:last-child {
  border-bottom: none;
}

.example-item .key {
  font-family: 'Courier New', Courier, monospace;
  color: #666;
}

.example-item .value {
  font-weight: 500;
  color: #1976D2;
}

.instructions {
  margin-top: 30px;
  padding: 15px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>